<template>
  <div class="app-container app-container-compactness">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="品牌名称" prop="brand_name">
        <el-input v-model="queryParams.brand_name" placeholder="品牌名称" clearable size="small" />
      </el-form-item>
      <el-form-item label="商品名称" prop="goods_name">
        <el-input v-model="queryParams.goods_name" placeholder="商品名称" clearable size="small" />
      </el-form-item>
      <el-form-item label="商品SPU" prop="goods_spu">
        <el-input v-model="queryParams.goods_spu" placeholder="商品SPU" clearable size="small" />
      </el-form-item>
      <el-form-item label="商品分类">
        <el-cascader
          v-model="category_ids"
          placeholder="请选择"
          :options="options1"
          :props="props"
          collapse-tags
          clearable
        />
      </el-form-item>
      <el-form-item label="贸易类型">
        <el-select v-model="queryParams.trade_type_name" clearable placeholder="请选择">
          <!--
                  <el-option v-for="item in options2" :key="item.value" :disabled="item.value == '保税直供'" :label="item.label" :value="item.value" />
         -->

          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="筛选">
        <el-select v-model="queryParams.supplier_id" clearable placeholder="请选择">
          <el-option v-for="item in [0,1,2,3]" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>

      <el-form-item label="是否添加">
        <el-select v-model="queryParams.is_added" clearable placeholder="请选择">
          <el-option v-for="item in ['已添加','未添加']" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="declare()"
        >批量添加</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        :selectable="handleDisable"
      />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <div v-for="item in props.row.rule" :key="item.unit_id">
              <el-form-item label="规格名称">
                <span>{{ item.sku_name }}</span>
              </el-form-item>
              <el-form-item label="规格价格">
                <span>{{ item.sku_price }}</span>
              </el-form-item>
            </div>
          </el-form>
        </template>
      </el-table-column>
      <!--      <el-table-column label="ID" align="center" prop="id" />-->
      <el-table-column label="商品SPU" align="center" prop="goods_spu" />
      <el-table-column label="品牌名称" align="center" prop="brand_name" />
      <el-table-column label="商品名称" align="center" prop="goods_name" />
      <el-table-column label="贸易类型" align="center" prop="trade_type_name" />
      <el-table-column label="产地" align="center" prop="origin_name" />
      <el-table-column
        label="图片"
        width="120"
      >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.goods_img"
            :src="scope.row.goods_img"
            style="height: 50px"
            :preview-src-list="scope.row.goods_img.split(',')"
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="is_sale" :formatter="isSaleFormatter">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_sale === 1" size="mini">{{ isSaleFormatter(scope.row) }}</el-tag>
          <el-tag v-else-if="scope.row.is_sale === 0" size="mini" type="danger">{{ isSaleFormatter(scope.row) }}</el-tag>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template v-slot="scope">
          <!-- v-action="'tenantGoods@update'" -->
          <el-button
            v-if="!scope.row.is_added"
            size="mini"
            type="primary"
            @click="submitForm(scope.row, '单独添加')"
          >添加商品</el-button>
          <el-link v-else type="success" disabled>已添加</el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :layout="'total, prev,next,sizes'" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
  </div>

</template>
<script>
import { getTenantRemoteList, goodsTenantSync, getCategory } from '@/api/externalGoods'

export default {
  name: 'Index',
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10,
        brand_name: undefined,
        goods_name: undefined,
        category_id: undefined,
        trade_type_name: undefined,
        is_sale: 1
      },
      options1: [],
      options2: [{
        value: '保税直供',
        label: '保税直供'
      }, {
        value: '完税进口',
        label: '完税进口'
      }, {
        value: '国内贸易',
        label: '国内贸易'
      }, {
        value: '香港直邮',
        label: '香港直邮'
      }, {
        value: '海外直邮',
        label: '海外直邮'
      }],
      props: { checkStrictly: true, label: 'name', value: 'id' },
      category_ids: [],
      ids: []
    }
  },
  computed: {
    // 计算最大ID
    maxId() {
      if (this.list.length > 0) {
        return Math.max(...this.list.map(item => item.id))
      }
      return null
    },
    // 计算最小ID
    minId() {
      if (this.list.length > 0) {
        return Math.min(...this.list.map(item => item.id))
      }
      return null
    }
  },
  watch: {
    // 监听分页变化
    'queryParams.page': function(newPage, oldPage) {
      if (newPage == 1) {
        this.queryParams.id_filtration = null
      } else {
        if (newPage > oldPage) {
          // 下一页：使用 < minId 查询条件
          this.queryParams.id_filtration = ['<', this.minId]
        } else if (newPage < oldPage) {
          // 上一页：使用 > maxId 查询条件
          this.queryParams.id_filtration = ['>', this.maxId]
        }
      }

      // this.fetchData(newPage) // 重新获取数据
    }
    // 监听整个 queryParams 对象的变化
    // 'queryParams': {
    //   handler(newVal, oldVal) {
    //     // 判断哪些参数发生了变化，并做相应的处理
    //     if (newVal.page !== oldVal.page || newVal.limit !== oldVal.limit) {
    //       // page 或 pageSize 发生变化时，重置 id_filtration
    //       this.queryParams.id_filtration = null
    //     }
    //   },
    //   deep: true // 深度监听整个对象的变化
    // }
  },
  created() {
    this.getList()
    this.getCategoryList()
  },
  methods: {
    isSaleFormatter(row) {
      return row.is_sale == 1 ? '上架' : '下架'
    },
    getCategoryList() {
      getCategory().then(res => {
        if (res.code === 10000) {
          // console.log(res)
          this.options1 = res.data
        }
      })
    },
    /** 查询清单列表 */
    getList() {
      this.loading = true
      if (this.category_ids) {
        this.category_ids.forEach(item => {
          this.queryParams.category_id = item
        })
      }
      getTenantRemoteList(this.queryParams).then(response => {
        this.list = response.data
        console.log(this.list)
        this.total = response.count
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        brand_name: undefined,
        goods_name: undefined,
        category_id: undefined,
        trade_type_name: undefined
      }
      this.category_ids = []
      this.handleQuery()
    },
    handleDisable(row, index) {
      // console.log(row)
      if (row.is_added) {
        return false
      } else {
        return true
      }
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    declare() {
      if (this.ids.length === 0) {
        this.$message({
          message: '请选择商品',
          type: 'warning'
        })
        return false
      }
      this.submitForm(this.ids, '批量添加')
    },
    submitForm(row, type) {
      this.loading = true
      var ids = { goods_ids: [] }
      if (type === '单独添加') {
        ids.goods_ids.push(row.id)
      } else {
        row.forEach(item => {
          ids.goods_ids.push(item)
        })
      }
      goodsTenantSync(ids).then(res => {
        // console.log(res)
        if (res.code === 10000) {
          this.$message({
            message: '同步成功',
            type: 'success'
          })
          this.getList()
          this.loading = false
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
          this.loading = false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.no-click {
  pointer-events: none; /* 禁止点击事件 */
  opacity: 0.5; /* 可选：降低透明度以显示禁用状态 */
}
</style>
